<template>
	<div>
		<v-header :headerLeftText="leftText" :headerCenterText="headerText"></v-header>

		<div class="container submit_order_container bgd_color_gray">
			<div class="shopping_adr_wrap pad_lr26 overflow_hide f_size24 f_color_gray0 bgd_color_white border_bot2">
				<div class="left line_height110">
					<img src="../static/images/adrress_icon.png" />
				</div>
				<div v-if="address_wrap" class="left pad_lr15 width8_0 height110 overflow_hide">
					<div class="f_size24">
						<span>{{adrMessage.receiver}}</span>
						<span>手机号{{adrMessage.receivePhone}}</span>
						<span>{{adrMessage.province}}</span>
						<span>{{adrMessage.city}}</span>
						<span>{{adrMessage.area}}</span>
						<span>{{adrMessage.detail}}</span>

					</div>
					<div class="f_size24">
						<span>{{adrMessage.province}}</span>
					</div>
				</div>
				<router-link to="/manageAddress">
					<div class="rig_arrow right height110 position_rel">
						<div class="arrow f_color_0">
						</div>
					</div>
				</router-link>
			</div>
			<div class="pad_lr26 overflow_hide f_size24 f_color_gray0 bgd_color_white border_bot2">
				<div class="left line_height62">
					已订购商品
				</div>
				<div @click="editBtnClick" v-show="goods_wrap_show" class="js_edite_btn right line_height62 pad_lr10">
					编辑
				</div>
				<div @click="wanBtnClick(goodsDetail.price)" v-show="edit_wrap_show" class="js_edite_btn right line_height62 pad_lr10">
					完成
				</div>
			</div>

			<div class="good_li_wrap bgd_color_white">
				<div class="border_bot1 overflow_hide padding_tb30">
					<div class="left pad_lr15">
						<img class="pic_h_w114" :src="src+goodsDetail.pic" />
					</div>
					<div v-show="goods_wrap_show" class="left product_descript_wrap f_size22">
						<div class="product_descript">
							{{goodsDetail.goodsName}}
						</div>
						<div class="product_size f_color_gray0">
							{{goodsDetail.standard}}
						</div>
						<div class="product_price f_color_gray0">
							￥{{goodsDetail.price}}
						</div>
						<div class="product_num f_color_gray0">
							&times;{{goodsNum}}
						</div>
					</div>
					<div v-show="edit_wrap_show" class="left product_edite_wrap f_size22">
						<div class="product_edite_inner_wrap">
							<div class="product_num_editer">
								<span @click="reduce_nums" class="reduce_nums">&minus;</span>
								<input @change="num_input_change" v-model="goodsNum" type="" name="" id="" value="" />
								<span @click="add_nums" class="add_nums">+</span>
							</div>
							<div class="product_size f_color_gray0">
								{{goodsDetail.standard}}
							</div>
							<div class="product_price f_color_gray0">
								￥{{goodsDetail.price}}
							</div>
							<div class="product_num f_color_gray0">
								&times;{{goodsNum}}
							</div>
						</div>
					</div>

				</div>
			</div>
			<!--买家留言-->
			<div class="line_height80 padding_lr26 bgd_color_white">
				<div class="border_bot1 f_size24 liuyan">
					<label for="">买家留言：</label>
					<input v-model="remarks" type="text" placeholder="选填" />
				</div>
			</div>
			<div class="line_height80 padding_lr26 bgd_color_white">
				<div class="border_bot1 f_size24 liuyan">
					<label for="">线下支付</label>
					<div class="checkbox">
						<input v-model="isPay" type="checkbox" />
						<label></label>
					</div>
				</div>
			</div>
			<div class="line_height80 padding_lr26 bgd_color_white">
				<div class="border_bot1 f_size24 liuyan">
					<label for="">使用店铺奖励券</label>
					<div class="checkbox">
						<input v-model="shopReward_btn" type="checkbox" />
						<label></label>
					</div>
				</div>
			</div>
			<div class="settle_money_wrap f_size26">
				<div class="left ">
					订单总额：
				</div>
				<div class="left f_color_main">
					￥{{all_money.toFixed(2)}}
				</div>
				<div @click="submitOrder" class="right settle_money_btn bgd_color">
					提交订单
				</div>
			</div>
		</div>
		<mt-popup v-model="popupVisible" popup-transition="popup-fade">
			<div class="modal_wrap f_size24 ">
				<p class="f_color_main padding_tb10">请输入店铺抵用券金额</p>
				<input @change="shopRewardInput" v-model="shopReward" type="number" /><br />
				<button @click="turnOffModel" class="f_color_main">确定</button>
			</div>
		</mt-popup>

	</div>
</template>
<script>
	export default {
		created() {
			var self = this
			console.log('this.$route', this.$route)
			this.goodsId = this.$route.query.goodsId
			this.goodsNum = this.$route.query.nums
			this.$api.get('/front/address', {
				checked: 1
			}, r => {
				console.log('获取默认收货地址r', r)
				if(r.data.list.length == 0) {
					self.address_wrap = false
				}
				this.adrMessage = r.data.list[0]
			})
			this.$api.get('/front/base/goodsDetail', {
				goodsId: this.goodsId
			}, r => {
				console.log('根据id获取商品r', r)
				this.goodsDetail = r.data.list[0]
				this.all_money = r.data.list[0].price * this.goodsNum
			})

		},
		data() {
			return {
				leftText: '',
				headerText: '结算',
				src: this.$src,
				adrMessage: {},
				address_wrap: true,
				receivePhone: '',
				receiver: '',
				province: '',
				city: '',
				area: '',
				detail: '',
				goodsId: 1,
				goodsDetail: {},
				goodsNum: 1,
				remarks: '',
				all_money: 0,
				edit_wrap_show: false,
				goods_wrap_show: true,
				isPay: false,
				shopReward: 0,
				shopReward_btn: false,
				popupVisible: false,
			}
		},
		methods: {
			submitOrder: function() {
				var self = this
				if(this.isPay === true) {
					this.isPay = 1
				} else {
					this.isPay = 0
				}
				this.$api.post('/front/orders', {
					goodsId: this.goodsId,
					goodsNum: this.goodsNum,
					isPay: this.isPay,
					remark: this.remarks,
					shopReward: this.shopReward,
				}, r => {
					Toast(r);
					self.$router.go(-1)
				})
			},
			editBtnClick: function() {
				this.edit_wrap_show = true
				this.goods_wrap_show = false
			},
			wanBtnClick: function(price) {
				this.edit_wrap_show = false
				this.goods_wrap_show = true
				this.all_money = this.goodsNum * price
			},
			reduce_nums: function() {
				this.goodsNum--
					if(this.goodsNum < 1) {
						this.goodsNum = 1
					}
			},
			add_nums: function() {
				this.goodsNum++
			},
			num_input_change: function() {
				this.goodsNum = parseInt(this.goodsNum)
				if(typeof(this.goodsNum) != 'number' || this.goodsNum < 1) {
					this.goodsNum = 1
				}
			},
			turnOffModel: function() {
				this.popupVisible = false
			},
			shopRewardInput: function() {
				console.log('this.shopReward', this.shopReward)
				this.shopReward = parseInt(this.shopReward)
				console.log('this.shopReward', this.shopReward)

				if(this.shopReward < 0) {
					this.shopReward = 0
					console.log('this.shopReward', this.shopReward)

				}
			}
		},
		watch: {
			shopReward_btn: {
				handler: function(nval, oval) {
					console.log('nval', nval)
					console.log('oval', oval)
					if(nval === true) {
						this.popupVisible = true
					} else {
						this.shopReward = 0
					}
				}
			}
		}
	}
</script>

<style>
	.checkbox {
		position: relative;
		display: inline-block;
		height: 50px;
		top: 15px;
		float: right;
	}
	
	.checkbox input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		opacity: 0;
		cursor: pointer;
	}
	
	.checkbox label {
		width: 90px;
		height: 42px;
		background: #ccc;
		position: relative;
		display: inline-block;
		border-radius: 46px;
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}
	
	.checkbox label:after {
		content: '';
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 100%;
		left: 0;
		top: -5px;
		z-index: 2;
		background: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
		-webkit-transition: 0.4s;
		transition: 0.4s;
	}
	
	.checkbox input:checked+label {
		background: #703320;
	}
	
	.checkbox input:hover+label:after {
		box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
	}
	
	.checkbox input:checked+label:after {
		left: 40px;
	}
	
	.checkbox input:checked+label:after {
		background: #4285F4;
	}
</style>